import * as THREE from 'three';
// 获取浏览器窗口的宽高，后续会用
let width = 600;
let height = 400;
function init(el) {
	// 创建一个场景
	scene = new THREE.Scene();
	// scene.background = new THREE.Color(0x000000)
	// let helper = new THREE.AxesHelper(1000)
	// scene.add(helper)

	// 创建一个具有透视效果的摄像机
	camera = new THREE.PerspectiveCamera(55, width / height, 0.01, 100);
	camera.position.z = 4;

	// camera.position.set = [1, 0, 6]

	// 创建一个 WebGL 渲染器，Three.js 还提供 <canvas>, <svg>, CSS3D 渲染器。
	// 抗锯齿、canvas 是否支持 alpha 透明度、preserveDrawingBuffer 是否保存 BUFFER 直到手动清除
	renderer = new THREE.WebGLRenderer({
		antialias: true,
		alpha: true,
		canvas: el
	});
	console.log(el.width, el.height);

	// let test: any = document.getElementById("test")
	// test.appendChild(renderer.domElement)
	// console.log(test)

	// 设置渲染器的清除颜色（即背景色）和尺寸。
	// 若想用 body 作为背景，则可以不设置 clearColor，然后在创建渲染器时设置 alpha: true，即 new THREE.WebGLRenderer({ alpha: true })

	renderer.setSize(width, height);

	// renderer.setSize(el.width, el.height)
	renderer.autoClear = true;
	// 清除颜色，第二个参数为 0 表示完全透明，适用于需要透出背景的场景
	renderer.setClearColor(0x000000, 0);
	// renderer.setPixelRatio(window.devicePixelRatio)
	// renderer.setAnimationLoop(animation)

	// 将渲染器的输出（此处是 canvas 元素）插入到 body 中
	let light = new THREE.PointLight(0xffffff, 2);
	light.position.x = 2;
	light.position.y = 3;
	light.position.z = 4;

	// let rxjs: any = document.getElementById("test")
	// rxjs.appendChild(renderer.domElement)
	// 创建一个立方体网格（mesh）：将材质包裹在几何体上

	let geometry = new THREE.BoxGeometry(1, 1, 1);
	// let geometry = new THREE.BoxBufferGeometry(100, 100, 100, 1, 1, 1)
	let material = new THREE.MeshNormalMaterial({
		// color: 0xcccccc,
		opacity: 0.5,
		transparent: true
	});
	mesh = new THREE.Mesh(geometry, material);

	// 创建一个立方体网格（mesh）：将材质包裹在几何体上

	// 设置网格的位置
	// mesh.position.x = 200
	// mesh.position.y = 200
	// mesh.position.set(2, 5, 30)
	// mesh.position.x = 5

	let wireframe = new THREE.WireframeGeometry(geometry);

	let linematerial = new THREE.LineBasicMaterial({
		color: '#f40',
		// linecap: "round",
		linejoin: 'round',
		linewidth: 2,
		transparent: true,
		opacity: 0.3
		// depthTest: false,
	});
	let line = new THREE.LineSegments(wireframe, linematerial);
	mesh.add(line);

	let geometry1 = new THREE.SphereGeometry(1, 32, 24);

	const loader = new THREE.TextureLoader();
	const texture = loader.load('../img/texture/1.jpg');
	// texture.wrapS = texture.wrapT = THREE.RepeatWrapping
	// texture.matrixAutoUpdate = false // 设置纹理属性matrixAutoUpdate为false以后，纹理将通过matrix属性设置的矩阵更新纹理显示
	let material1 = new THREE.MeshBasicMaterial({
		map: texture
	});
	// var colorMap = loader.load('../img/texture/earth_atmos_2048.jpg')
	// var specMap = loader.load('../img/texture/earth_specular_2048.jpg')
	// var normalMap = loader.load('../img/texture/earth_normal_2048.jpg')
	// var alphaMap = loader.load('../img/texture/earth_alpha_2048.jpg')
	// var material1 = new THREE.MeshPhongMaterial({
	//     color: 0xeeeeee,
	//     specular: 0x333333,
	//     shininess: 15,
	//     envMap: colorMap,
	//     specularMap: specMap,
	//     normalMap: normalMap,
	//     alphaMap: alphaMap
	// })
	// material1.opacity = 0.5 //透明度属性
	// material1.transparent = true //开启透明度计算
	mesh1 = new THREE.Mesh(geometry1, material1);
	mesh1.material.needsUpdate = true;
	mesh1.position.z = 1.5;
	// mesh1.position.y = 0.2
	// mesh1.position.x = 1
	// mesh1.position.set = [0, 0, 30]
	// mesh1.position.x = 200
	// var clock = new THREE.Clock() //时间跟踪
	// //圆周运动
	// var time = clock.getElapsedTime() * 1
	// mesh1.position.z = Math.sin(time)
	// mesh1.position.x = Math.cos(time)
	//网格模型添加到场景中
	scene.add(camera, mesh, mesh1, light);
}
// 窗口变动触发的函数
function onWindowResize() {
	// 设置透视摄像机的长宽比
	camera.aspect = width / height;
	camera.updateProjectionMatrix();
	// 设置渲染器输出的 canvas 的大小
	renderer.setSize(width, height);
}
function animation() {
	mesh.rotation.z += 0.06;
	mesh.rotation.y += 0.06;
	mesh.rotation.x += 0.06;
	mesh1.rotation.y -= 0.01;
	// mesh.rotation.x = time / 2000
	// mesh.rotation.y = time / 1000
	// mesh1.rotation.y = time / 1000
	var timer = Date.now() * 0.001;
	mesh.position.y = Math.cos(timer) * 1.5; //相机位置x轴方向
	mesh.position.z = Math.sin(timer) * 1.5; //相机位置y轴方向
	renderer.render(scene, camera);
	requestAnimationFrame(animation);
}
let camera: any, renderer: any, mesh: any, mesh1: any, scene: any;
export { init, animation, onWindowResize };
